<template>
  <div id="table-type">
    <!-- text文本 v-model String-->
    <el-input
      v-if="type == 'text'"
      type="text"
      v-model="myValue"
      @input="onChange"
    ></el-input>
    <!-- 单选 v-model String|Number-->
    <el-radio-group
      v-else-if="type == 'radio'"
      v-model="myValue"
      @change="onChange"
    >
      <el-radio v-for="(item, i) in options" :key="i" :label="item.value">
        {{ item.label }}
      </el-radio>
    </el-radio-group>
    <!-- 多选 v-model Array-->
    <el-checkbox-group
      v-else-if="type == 'checkbox'"
      v-model="myValue"
      @change="onChange"
    >
      <el-checkbox v-for="(item, i) in options" :key="i" :label="item.value">
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>
    <!-- 起止日期 v-model Array [0]开始 [1]结束-->
    <el-date-picker
      v-else-if="type == 'fromToDate'"
      v-model="myValue"
      type="daterange"
      @change="onChange"
      value-format="yyyy-mm-dd"
      size="mini"
    >
    </el-date-picker>
  </div>
</template>
<script>
export default {
  name: "tableType",
  model: {
    prop: "value",
    event: "change",
  },
  props: ["value", "type", "options"],
  data() {
    return {
      myValue: null,
    };
  },
  created() {
    this.myValue = this.value;
  },
  methods: {
    onChange() {
      this.$emit("change", this.myValue);
    },
  },
};
</script>
<style lang="scss">
#table-type {
  .el-range-editor--mini {
    width: 210px;
  }
}
</style>